<template>
	<div>
		<div class="chunk">
			<div class="title">收款信息</div>
			<div class="container_detail">
				<FormItems
					ref="form"
					labelWidth="140px"
					v-model="info"
					:form="formList"
					state="readonly"></FormItems>
			</div>
		</div>
	</div>
</template>
<script>
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	export default {
		name: '',
		components: { FormItems },
		mixins: [],
		props: {
			value: {
				type: Object,
				required: true,
			},
			state: {
				required: false,
			},
		},

		data() {
			return {};
		},
		computed: {
			info: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			formList() {
				return [
					{
						label: '收款人：',
						prop: 'payeeName',
					},
					{
						label: '收款人类型：',
						prop: 'payeeTypeStr',
					},
					{
						label: '收款账户开户行名称：',
						prop: 'payeeBank',
					},
					{
						label: '收款账号：',
						prop: 'payeeAccount',
					},
				];
			},
		},
		watch: {},
		mounted() {},
		methods: {},
	};
</script>
<style lang="scss" scoped>
	.chunk {
		overflow: hidden;
		background-color: #fff;
		border-radius: 4px;
		padding: 15px 20px;
		margin: 20px;
		box-sizing: border-box;
		.title {
			border-bottom: 1px solid #e9e9e9;
			padding-bottom: 15px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 16px;
			color: #333333;
			line-height: 22px;
			text-align: left;
			font-style: normal;
		}

		.container_invoice {
			display: flex;
			margin-bottom: 15px;
			.preview {
				flex: 1;
				// width: 300px;
				display: flex;
				flex-direction: column;
				align-items: center;
				.container_preview {
					padding: 25px 0;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					// margin-top: 25px;
					width: 180px;
					.image {
						aspect-ratio: 16/9;
					}
					.handleBtn {
						display: flex;
						justify-content: space-around;
					}
				}
			}
			.container_detail {
				flex: 2;
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}
	}
	.empty {
		font-size: 14px;
		text-align: center;
		padding: 20px;
	}
</style>
